<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery实现动画效果</title>
    <style>
        div {
            /* 缩进两个文字 */
            text-indent: 2em;
        }

        * {
            margin: 0;
            padding: 0;
        }

        body {
            margin: 0 auto;
            /*居中*/
            width: 960px;
            background: #282c2f;
            color: #d1d9dc;
        }

        .content {
            width: 250px;
        }

        .box {
            position: relative;
            background: #363C41;
            border: 5px solid #363C41;
        }

        .box h3 {
            font-size: 12px;
            padding-left: 6px;
            line-height: 22px;
            background-color: #669900;
            font-weight: bold;
            color: #fff;
            height: 22px;
        }

        .text {
            line-height: 22px;
            padding: 0 6px;
            color: #666;
            text-indent: 2em;
        }
    </style>
    <script src="jquery-3.5.1/jquery-3.5.1/jquery-3.5.1.js"></script>
    <script>
        $(function(){
            $(".box h3").click(function(){
                $(this).next(".text").animate({height:'toggle'},"slow");/*$(this)表示当前被单击元素，next(“.text”)
                函数选择当期元素后面的类名为“text”的同级元素。*/ 
            });
        });
    </script>
</head>

<body>
    <div>
        <p>jQuery animate()方法用于执行一个基于CSS属性的自定义动画，用户可以为匹配的元素设置css样式，
            animate()函数将会执行一个从当前样式到指定的css样式的过渡动画。
            其函数语法为：$(selector).animate({params},speed,callback);</p>
        <p>
            params参数定义形成动画的CSS属性；speed参数规定效果的时长。
            它可以取以下值：“slow”“fast”或毫秒；callback参数是动画完成后所执行的函数名称。
        </p>

    </div>
    <div class="content">
        <div class="box">
            <h3>jQuery动画效果——隐藏和显示 </h3>
            <div class="text">
                实例<br>
                jQuery hide() 简单的jQuery hide()方法演示。<br />
                jQuery hide() 另一个hide()实例。演示如何隐藏文本
            </div>
        </div>
        <div class="box">
            <h3>jQuery 效果——滑动</h3>
            <div class="text">
                jQuery slideDown() 演示 jQuery slideDown() 方法。<br />
                jQuery slideUp() 演示 jQuery slideUp() 方法。<br />
                jQuery slideToggle() 演示 jQuery slideToggle() 方法。
            </div>

        </div>
    </div>
</body>

</html>